<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../easyui-config.js"></script>
    <script type="text/javascript" src="json-data.js"></script>

</head>
<body>
    <div>
		<div class="easyui-linkbutton" onclick="let options=$('#dg').datagrid('options');
		showTip(JSON.stringify(options));">options</div>
		<div class="easyui-linkbutton" onclick="let getPager=$('#dg').datagrid('getPager');showTip(JSON.stringify(getPager));">getPager</div>
		<div class="easyui-linkbutton" onclick="let getPanel=$('#dg').datagrid('getPanel');showTip(JSON.stringify(getPanel));">getPanel</div>
		<div class="easyui-linkbutton" onclick="let getColumnFields=$('#dg').datagrid('getColumnFields');showTip(JSON.stringify(getColumnFields));">getColumnFields(非冻结列)</div>
		<div class="easyui-linkbutton" onclick="let getColumnFields=$('#dg').datagrid('getColumnFields',true);showTip(JSON.stringify(getColumnFields));">getColumnFields(冻结列)</div>
		<div class="easyui-linkbutton" onclick="let getColumnOption=$('#dg').datagrid('getColumnOption','listprice');showTip(JSON.stringify(getColumnOption));">getColumnOption</div>
		<div class="easyui-linkbutton" onclick="let resize=$('#dg').datagrid('resize');showTip(JSON.stringify(resize));">resize</div>
		<div class="easyui-linkbutton" onclick="$('#dg').datagrid('load');">load</div>
		<div class="easyui-linkbutton" onclick="$('#dg').datagrid('load',{ data:[] });">load</div>
		<div class="easyui-linkbutton" onclick="$('#dg').datagrid('reload');">reload</div>
		<div class="easyui-linkbutton" onclick="$('#dg').datagrid('reload',{ url:'http://xxx' });">reload</div>
		
		<div class="easyui-linkbutton" onclick="">reloadFooter</div>
		
		<div class="easyui-linkbutton" onclick="$('#dg').datagrid('loading');">loading</div>
		<div class="easyui-linkbutton" onclick="$('#dg').datagrid('loaded');">loaded</div>
		<div class="easyui-linkbutton" onclick="$('#dg').datagrid('fitColumns');">fitColumns(自适应列)</div>
		<div class="easyui-linkbutton" onclick="$('#dg').datagrid('fixColumnSize');">fixColumnSize(固定所有列宽度)</div>
		<div class="easyui-linkbutton" onclick="$('#dg').datagrid('fixColumnSize','itemid');">fixColumnSize(固定指定列宽度)</div>
	
        <table id="dg" style="width:600px;height:400px;"></table>
		
        <script>
            $(() => {
                $("#dg").datagrid({
                    data: data
                    ,rownumbers: true
                    ,singleSelect: false
					,multiple:true
					,checkOnSelect:true
					,selectOnCheck:true
					,collapsible: true
					,fitColumns:true /* 自适应列 */
					,resizeHandle:'both' /* left right both */
					,resizeEdge:1
					,autoRowHeight:false /* 设置为false会提高加载性能 */
					,striped:true /* ??? */
					,method:'get'
					,nowrap:false /* ??? true:在一行中显示数据,可以提高加载性能 */
					,idField:'itemid'
					,url:null
					,loadMsg:'正在加载中,请稍等'
					,emptyMsg:'未能获取所需的信息'
					,rownumbers:true /* 显示行号 */
					,rownumberWidth:20 /* 行号列宽 */
					,ctrlSelect:true /* ctrl键多选,单击多选会失效 */
					,scrollOnSelect:true /* ??? true:在选择它时自动滚动到该行 */
					,pagePosition:'bottom' /* 分页工具条位置 top bottom both(顶部和底部均显示) */
					,pagination:true /* 显示分页工具条 */
					,pageNumber:1 /* 分页第几页 */
					,pageSize:6
					,pageList:[5,6,7,10,15,30]
					,queryParams:{} /* query string */
					,sortName:'listprice' /* ??? */
					,sortOrder:'desc'
					,multiSort:false
					,remoteSort:true
					,showHeader:true
					,showFooter:false
					,scrollbarSize:18/* ??? */
					,editorHeight:25
					,loader:function(param, success, error) {
						return false;/* 终止加载 */
					}
					/*
					,loader:function(param, success, error) {
						let queryString = {
							page : param.page,
							size : param.rows
						};
						$.ajax({
							type: "post",
							url: "http://bala-bala",
							async: true, //如果是在ajax方法外加载表格数据，必须【同步】方式提交
							contentType: 'application/json',
							dataType: 'JSON',
							data: JSON.stringify(queryString),
							success: function(data) {
								console.log(data)
								success(data);
							},
							error:function(){
								error();
							}
						});
					}
					*/
					//,view:null /* ??? */
					,loadFilter:function(data){
						if(data.total==void(0)&&data.length>0){
							return { total:data.length,rows:data };
						}
						return data;
					}
					,rowStyler:function(index,row){
						if (row.listprice>80){
							return 'background-color:#6293BB;color:#fff;'; // return inline style
							// the function can return predefined css class and inline style
							// return {class:'r1', style:{'color:#fff'}};
						}
					}
					,frozenColumns:[[
						{ field: '', checkbox: true },
						{ field: 'itemid', title: 'Item ID', width: 80 },
                        {
							field: 'productid', title: 'Product ID', width: 120 ,
							formatter:function(value,row){
								return row.productname;
							},
							editor:{
								type:'combobox',
								options:{
									valueField:'productid',
									textField:'productname',
									method:'get',
									url:null,
									data:data.rows.map(item=> {return { productid:item.productid,productname:item.productname } }),
									required:true
								}
							}
						}
					]]
                    ,columns: [[
						{ field: 'listprice', title: 'List Price', width: 80, align: 'right',sortable:true },
                        { field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right' },
                        { field: 'attr1', title: 'Attribute', width: 250 },
                        { field: 'status', title: 'Status', width: 60, align: 'center' }
                    ]]

					,onClickCell:onClickCell
					,onEndEdit: onEndEdit

					,toolbar: [{
							iconCls: 'icon-edit',
							handler: function(){alert('edit')}
						},'-',{
							iconCls: 'icon-help',
							handler: function(){alert('help')}
						}]

					,onLoadSuccess:function(){
						$(this).datagrid('freezeRow',0)
							   .datagrid('freezeRow',1)
							   .datagrid('freezeRow',2);
					}
                });
            });
        </script>

        <script type="text/javascript">
		var editIndex = undefined;
		function endEditing(){
			if (editIndex == undefined){return true}
			if ($('#dg').datagrid('validateRow', editIndex)){
				$('#dg').datagrid('endEdit', editIndex);
				editIndex = undefined;
				return true;
			} else {
				return false;
			}
		}
		function onClickCell(index, field){
			if (editIndex != index){
				if (endEditing()){
					$('#dg').datagrid('selectRow', index)
							.datagrid('beginEdit', index);
					var ed = $('#dg').datagrid('getEditor', {index:index,field:field});
					if (ed){
						($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
					}
					editIndex = index;
				} else {
					setTimeout(function(){
						$('#dg').datagrid('selectRow', editIndex);
					},0);
				}
			}
		}
		function onEndEdit(index, row){
			var ed = $(this).datagrid('getEditor', {
				index: index,
				field: 'productid'
			});
			row.productname = $(ed.target).combobox('getText');
		}
		function append(){
			if (endEditing()){
				$('#dg').datagrid('appendRow',{status:'P'});
				editIndex = $('#dg').datagrid('getRows').length-1;
				$('#dg').datagrid('selectRow', editIndex)
						.datagrid('beginEdit', editIndex);
			}
		}
		function removeit(){
			if (editIndex == undefined){return}
			$('#dg').datagrid('cancelEdit', editIndex)
					.datagrid('deleteRow', editIndex);
			editIndex = undefined;
		}
		function acceptit(){
			if (endEditing()){
				$('#dg').datagrid('acceptChanges');
			}
		}
		function reject(){
			$('#dg').datagrid('rejectChanges');
			editIndex = undefined;
		}
		function getChanges(){
			var rows = $('#dg').datagrid('getChanges');
			alert(rows.length+' rows are changed!');
		}
        </script>
    </div>
</body>
</html>